$(function () {
    //validate的基本使用
    // $('#myform').validate();
    /* $('#myform').validate({//格式:key:value
        //规则
        rules:{
            //定义需要验证的规则  主要是通过标签上的name来判定的
            //用户名
            user:{
                required:true,
                maxlength:5
            },
            pwd:{
                required:true 
            }
        },
        //提示信息
        messages:{
           //用户名
           user:{
                required:'请输入用户名',
                maxlength:'用户名过长'
            },
            pwd:{
                required:'请输入密码' 
            }
        }
    }); */

    $('#main .mainB .bt').click(function () {
        $('#main .mainB>div').eq(1).addClass('show').siblings().removeClass('show');
        $('#main .mainT .list li').eq(1).addClass('act').siblings().removeClass('act');
        $('#main .mainT .list li').eq(1).find('span').addClass('bgcfeb').removeClass('bgc9f');
        $('#main .mainT .list li').eq(1).siblings().find('span').addClass('bgc9f').removeClass('bgcfeb');
    })

    //自定义规则    

    $('#myform').validate(
        {
            rules: {
                user: {
                    required: true,
                    isUser: true
                },
                pwd: {
                    required: true,
                    isPwd: true
                }
            },
            messages: {
                user: {
                    required: '请输入你的用户名'
                },
                pwd: {
                    required: '请输入你的密码'
                }
            }
        }
    );


    //自定义规则列表
    /* 
    帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
    密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$

             jQuery.validate的optional(element),用于表单控件的值不为空时才触发验证。
    */
    jQuery.validator.addMethod("isUser", function (value, element) {
        var tel = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
        return this.optional(element) || (tel.test(value));
    }, "字母开头，允许5-16字节，允许字母数字下划线");

    //密码
    jQuery.validator.addMethod("isPwd", function (value, element) {
        var tel = /^[a-zA-Z]\w{5,17}$/;
        return this.optional(element) || (tel.test(value));
    }, "以字母开头，长度在6~18之间，只能包含字母、数字和下划线");


    //同意协议操作   如果同意按钮已经选中,此时表单才能提交  给btn设置背景色及disabled

    $('#isagree').click(function () {
        // console.log(111)
        //获取当前input的状态值
        let status = $(this).prop('checked');

        //判定  如果status的值为true 表示已经选中  ==> btn背景高亮 ,并可以点击(去掉禁用)
        //如果status的值为false 表示没有选中  ==> btn背景灰色 ,并不可以点击(禁用)

        if (status) {
            //选中
            $('.btns').css('background-color', '#f60').prop('disabled', !status);
        } else {
            //没有选中
            $('.btns').css('background-color', '').prop('disabled', !status);
        }
    })



    $('#main .mainB .btns').click(function () {
        $('#main .mainB>div').eq(2).addClass('show').siblings().removeClass('show');
        $('#main .mainT .list li').eq(2).addClass('act').siblings().removeClass('act');
        $('#main .mainT .list li').eq(2).find('span').addClass('bgcfeb').removeClass('bgc9f');
        $('#main .mainT .list li').eq(2).siblings().find('span').addClass('bgc9f').removeClass('bgcfeb');

         //定义变量保存时间
         let num = 3;

         //开启计时器
         let timeId = setInterval(function (){
             //自减
             --num;  
 
             //判断
             if( num === 0){
                 //关闭计时器
                 clearInterval(timeId)
                 //页面跳转
                 location.href = './index.html'
             }else{
                 //将自减后的值渲染到box框中
                 document.getElementById('skip').innerHTML = num;
             }
         }, 1000)
    })
    

})